<template>
  <div>
    <textarea 
      id="kindeditor" 
      ref="editor"
    />
  </div>
</template>

<script>
import { SERVER_BASE_URL, STATIS_HOST } from '@/api/config.js';
export default {
  name: 'KindEditor',
  props: {
    config: Object
  },
  data () {
    return {
      ke: null
    };
  },
  params () {
    return {
      token: localStorage.getItem('token')
    };
  },
  mounted () {
    let _this = this;
    if (window.KindEditor) {
      let configuration = {
        themesPath: '@s/plugins/kindeditor/themes/',
        themeType: 'simple',
        langPath: '@s/plugins/plugins/kindeditor/lang/',
        langType: 'zh-CN',
        pluginsPath: '@s/static/plugins/kindeditor/plugins/'
      };
      if (_this.config) {
        for (let k in _this.config) {
          configuration[k] = _this.config[k];
        }
      }
      configuration['staticHost'] = STATIS_HOST;
      configuration['extraFileUploadParams'] = {
        token: localStorage.getItem('token')
      };
      _this.ke = window.KindEditor.create('#' + _this.$refs['editor'].id, configuration);
      // _this.ke = window.KindEditor.create('#kindeditor', configuration);
    }
  },
  destroyed () {
    if (this.ke) {
      this.ke.remove();
      this.ke = null;
    }
  },
  methods: {
    getContent () {
      return this.ke ? this.ke.html() : '';
    },
    setContent (html) {
      if (this.ke) {
        this.ke.html(html);
      }
    },
    isEmpty () {
      return this.ke ? this.ke.isEmpty() : true;
    }
  }
};
</script>

<style>
.ke-icon-uploadimg {
  background-image: url(/static/plugins/kindeditor/themes/default/default.png);
  background-position: 0px -496px;
  width: 16px;
  height: 16px;
}

.ke-icon-uploadfile {
  background-image: url(/static/plugins/kindeditor/themes/default/default.png);
  background-position: 0px -1040px;
  width: 16px;
  height: 16px;
}
</style>
